<template>
  <div>
    <!-- 头部：LOGO 搜索 打开APP -->
    <XmlyHeader />

    <!-- 内容：详情数据 -->
    <div class="channel-box">
      <!-- 侧边导航栏 -->
      <div class="nav-title">
        <van-sidebar @change="sideChange" v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in channelList.groups"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>

      <!-- 导航栏详情 -->
      <div ref="scrollDom" class="nav-content-all">
        <ul>
          <li
            :ref="'item' + index"
            v-for="(item, index) in channelList.groups"
            :key="index"
          >
            <!-- 导航栏详情标题 -->
            <div class="content-title">
              <p>{{ item.name }}</p>
            </div>
            <!-- 导航栏详情内容 -->
            <div class="nav-content">
              <span v-for="(name, index) in item.channels" :key="index">
                {{ name.channelName }}
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import XmlyHeader from "@/components/XmlyHeader";
  import { getChannelApi } from "@/api/channel";

  export default {
    name: "channel",
    XmlyHeader,
    data() {
      return {
        activeKey: 0,
        channelList: [],
        // height: 0,
      };
    },
    mounted() {
      this.getChannelList();
    },
    methods: {
      async getChannelList() {
        const result = await getChannelApi();
        console.log(result);
        this.channelList = result.data;
      },
      // 侧边导航栏的切换事件
      sideChange(index) {
        // let itemKeyList = Object.keys(this.$refs);
        // console.log(this.$refs, index)
        let height = 0;
        let scrollDom = this.$refs.scrollDom;
        if (index === 0) scrollDom.scrollTop = 0;
        else {
          for (let i = 0; i <= index; i++) {
            // console.log('循环次数', i)
            if (i !== 0)
              height = height + this.$refs["item" + (i - 1)][0].scrollHeight;
          }
          scrollDom.scrollTop = height;
        }
        console.log("height", height);
        // console.dir(this.$refs[item + index][0].scrollHeight);
        // for (let index = 0; index < this.$refs; index++) {}
      },
    },
  };
</script>

<style>
  .channel-box {
    display: flex;
    height: calc(100vh - 54px);
  }
  .nav-title {
    overflow: auto;
    width: 100%;
    height: 100%;
  }
  .nav-title::-webkit-scrollbar {
    display: none;
  }
  .nav-content-all {
    overflow: auto;
    height: 100%;
  }
  .nav-content-all li {
    margin: 0;
  }
  .nav-content-all ul {
    display: flex;
    flex-direction: column;
  }
  .nav-content-all::-webkit-scrollbar {
    display: none;
  }
  .content-title {
    font-size: 14px;
    font-weight: 600;
    border-bottom: 0.5px solid #e8e8e8;
  }
  .content-title p {
    padding-left: 15px;
  }
  .nav-content {
    display: flex;
    flex-wrap: wrap;
    padding-left: 7.5px;
  }
  .nav-content span {
    color: #7e8c8d;
    font-size: 13px;
    padding: 7.5px 7.5px 7.5px 7.5px;
  }
</style>
